<template>
  <div style="width: 100%">
    <div class="choose-list" v-if="mode === 'edit'">
      <div class="label-name"
      :style="{
      color:checkListColor,
      fontSize:checkListSize+'px',

    }"
      :class="isTitleCenter ? 'text-center' : 'text-left'"
      >{{ labelName }}</div>
      <template v-if="currentDataList  && currentDataList.length > 0">
        <ul>
            <li v-for="(item, index) in currentDataList" :key="index" 
              :class="[isAlignCenter?'text-center':'text-left', chooseListFlag == index ? 'choose-list-selected' : '']"
              @click="chooseList($event, index, item.value)">
                <span>{{ item.label }}</span>
              </li>
        </ul>
      </template>
    </div>
    <!-- <div v-else>{{ ['文化程度变更、更正','婚姻状况变更、更正','兵役状态变更、更正','服务处所、职业变更、更正'][value-1] }}</div> -->
    <div v-else>{{ typeName }}</div>
  </div>
</template>
<script>
import {findComponentUpward } from '@/utils/util'
import datasource from '../../mixins/steps-datasource'
export default {
  name: "pm-checklist",
  mixins: [datasource],
  props: {
    // value: {},
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    currentDataList: {
      type: Array,
      default() {
        return []
      },
    },
    isAlignCenter: {
      type: Boolean,
      default: false,
    },
    labelName: {
      type: String,
      default: '选择业务类型'
    },
    checkListColor:{
      default:""
    },
    checkListSize:{
      default:""
    },
    isTitleCenter:{
      type: Boolean,
      default: false,
    }

  },
  data() {
    return {
      chooseListFlag: -1,
      currentDataList:[]
    }
  },
  watch:{
    options:{
      immediate:true,
      deep: true,
      handler(val){
        if(val && val.length){
          this.currentDataList = val.map(item=>{
            return {
              value:item.value,
              label:item.label
            }
          })
        }
      }
    }
  },
  computed: {
    typeName() {
      let result = this.currentDataList.filter(item => item.id = this.value)
      return result.name
    },
    chooseListFlag: {
      get() {
        if (this.value || this.value == 0) {
        const index = this.options &&  this.options.findIndex(item=>item.value == this.value)
        if(index > -1){
          return index + 1 + ''
        }else{
          return this.value
        }
        } else {
          return null
        }
      },
      set(val) {
        this.$emit("input", val)
      },
    },
  },
  mounted() {
    console.log(findComponentUpward(this),'===')
    console.log(this.typeName,"typeName");
  },
  methods: {
    chooseList (e, index, value) {
        this.chooseListFlag = index
        this.$emit("input", value)
        console.log(value)
    }
  },
}
</script>
<style scoped>
  .label-name {
    font-size: 14px;
    text-align: left;
    /* color: #999; */
  }
  li {
    margin: 15px auto;
    padding: 5px 10px;
    line-height: 15px;
    list-style: none;
    text-align: left;
    border: 1px solid #c0c0c0;
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .choose-list {
    width: auto !important;
    padding: 16px;
  }
  .choose-list ul li.choose-list-selected {
    border:1px solid #1890ff !important;
  }
</style>